<template>
	<view class="custom-view">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">自定义</block>
		</cu-custom>
		<view class="custom-container">
			<scroll-view scroll-y style="height: 100%;">
				<view class="grid justify-center col-4">
					<template v-for="(item, index) in colors">
						<m-cricle :key="index" @tap="cricleSelect(item, index)" @longpress="longpress(index)" :color="item.value"></m-cricle>
					</template>
				</view>
			</scroll-view>
		</view>
		<view class="custom-bottom">
			<view class="flex flex-wrap">
				<view class="basis-xs">
					<text class="custom-text">名称:</text>
				</view>
				<view class="basis-xl">
					<input v-model="title" class="input" type="text">
				</view>
			</view>
			<view class="flex flex-wrap">
				<view class="basis-xs">
					<text class="custom-text">律动:</text>
				</view>
				<view class="basis-xl">
					<switch @change="onOpen" :class="{checked: isOpen}" :checked="isOpen"></switch>
				</view>
			</view>
			<view class="flex flex-wrap">
				<view class="basis-xs">
					<text class="custom-text">模式:</text>
				</view>
				<view class="basis-xl">
					<button v-for="(item, index) in list" :key="index" @click="onSelect(item.type, index)" :class="{active: activeIndex === index}"
					 class="custom-btn cu-btn round line-gray">{{item.label}}</button>
				</view>
			</view>
			<view class="flex flex-wrap">
				<button @click="confirm" class="cu-btn block  bg-blue lg submit-btn">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import MCricle from "@/components/m-cricle.vue"
	import ColorPicker from "@/components/color-picker/index.vue"
	import {
		MODE_TYPE
	} from "@/config.js"

	const {
		GRADIENT, //随机渐变
		JUMP, //随机跳变
		FLASH, //随机频闪
		BREATH, //随机呼吸
		GRADIENT_DO, //音乐律动渐变
		EXPFLASH_DO, //音乐律动爆闪 
	} = MODE_TYPE;
	const defaultColors = JSON.stringify([{
			value: ''
		}, {
			value: ''
		}, {
			value: ''
		}, {
			value: ''
		},
		{
			value: ''
		}, {
			value: ''
		}, {
			value: ''
		}, {
			value: ''
		},
		{
			value: ''
		}, {
			value: ''
		}, {
			value: ''
		}, {
			value: ''
		},
		{
			value: ''
		}, {
			value: ''
		}, {
			value: ''
		}, {
			value: ''
		},
	]);

	export default {
		components: {
			MCricle,
			ColorPicker
		},
		data() {
			return {
				title: '',
				isOpen: true, //是否开启律动
				colorPickerHeight: 500,
				activeIndex: 0,
				list: [{
						type: GRADIENT,
						label: '渐变'
					},
					{
						type: JUMP,
						label: '跳变'
					},
					{
						type: FLASH,
						label: '闪屏'
					},
					{
						type: BREATH,
						label: '呼吸'
					},
					// {key: 5, type: GRADIENT_DO, label: '律动渐变'},
					// {key: 6, type: EXPFLASH_DO, label: '律动爆闪 '}
				],
				colors: []
			};
		},
		computed: {
			...mapGetters(['selectColor', 'modeParams', 'modeSource'])
		},
		mounted() {
			this.colorPickerHeight = this.contentHeight;
		},
		watch: {
			title(value, old) {
				if (value.length > 6) {
					this.title = old;
					uni.showToast({
						title: '名称最大6个字符',
						duration: 2000
					});
				}
			}
		},
		onShow() {
			const {
				modeSelectIndex,
			} = this.modeParams;

			let mode_type = {
				type: GRADIENT,
				LV_DO: this.isOpen
			};

			let item = this.modeSource.modeList[modeSelectIndex];

			if (item) {
				let {
					colors,
					modeType,
					label
				} = item;
				this.colors = colors || JSON.parse(defaultColors);
				this.modeType = modeType || mode_type;
				this.isOpen = this.modeType.LV_DO;
				this.title = label;
				this.list.map((item, index) => (item.type === this.modeType.type ? (this.activeIndex = index) : null))
			}

			if (this.$store.isSelectColorOver) {
				//把值存储到数据里面
				this.colors[this.modeParams.customSelectIndex].value = this.selectColor.value;
				this.save();
				//置空
				this.$store.isSelectColorOver = false;
				this.$store.dispatch('app/setSelectColor', null);
			}
		},
		methods: {
			onSelect(type, index) {
				this.activeIndex = index;
				this.modeType = {
					type: type,
					LV_DO: this.isOpen
				};
			},
			cricleSelect(item, index) {
				this.$store.dispatch('app/setModeParams', {
					customSelectIndex: index
				})
				uni.navigateTo({
					url: '/pages/select-color/select-color'
				})
			},
			//是否开启律动
			onOpen(e) {
				this.isOpen = e.detail.value
				this.modeType.LV_DO = this.isOpen
			},
			save() {
				const {
					modeSelectIndex,
				} = this.modeParams;
				let item = this.modeSource.modeList[modeSelectIndex];
				if (item) {
					item.modeType = this.modeType;
					item.colors = this.colors;
					/**
					 * 如果名字是空的 自动补充
					 */
					if (this.title == '') {
						let label = this.list[this.activeIndex].label
						this.title = label + (this.isOpen ? '律动' : '')
					}
					item.label = this.title;
				}
				this.$store.dispatch('app/setModeSource', this.modeSource);
			},
			confirm() {
				this.save();
				uni.navigateBack({
					delta: 1
				});
			},
			longpress(index) {
				this.colors[index].value = '';
				this.$forceUpdate();
			}
		}
	}
</script>

<style lang="scss">
	.custom-view {
		min-height: 100vh;
		background: #ffff;

		.custom-container {
			height: calc(100vh - 350px);
			padding: 15px 15px 0;
			overflow: hidden;
		}

		.custom-text {
			line-height: 30px;
			text-align: right;
			padding-right: 15px;
			display: block;
		}

		.custom-bottom {
			padding: 0 20px;

			.input {
				border: 1px solid #e0dfdf;
				border-radius: 3px;
				height: 30px;
				padding: 0 5px;
			}

			.custom-btn {
				margin: 0 5px 0 0 !important;
			}

			.custom-btn.active {
				color: #0081ff !important;
			}

			.submit-btn {
				width: 100%;
				margin-top: 10px;
			}

			.flex-wrap {
				margin-bottom: 15px;
			}
		}
	}
</style>
